<template>
  <div id="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// cesium token
Cesium.Ion.defaultAccesssToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

// 设置默认视角 [笛卡尔坐标系 转换为 世界坐标系]
// api https://cesium.com/learn/cesiumjs/ref-doc/Rectangle.html
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,
  20.4,
  110.4,
  61.2
);
import { onMounted } from 'vue';
onMounted(() => {
  // api https://cesium.com/learn/cesiumjs/ref-doc/Viewer.html?classFilter=view
  var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false, // 各类图层
    navigationHelpButton: false, // 帮助按钮
    animation: false, // 动画播放
    // creditContainer: 'credit',
    timeline: false, // 时间轴
    fullscreenButton: false, // 是否全屏
    vrButton: false,

    // 设置天空盒子，太空的背景图
    // skyBox: new Cesium.SkyBox({
    //   sources: {
    //     positiveX: 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
    //     negativeX: 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
    //     positiveY: 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
    //     negativeY: 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
    //     positiveZ: 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
    //     negativeZ: 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg',
    //   },
    // }),
  });

  // Add basic drag and drop functionality
  viewer.extend(Cesium.viewerDragDropMixin);

  // Show a pop-up alert if we encounter an error when processing a dropped file
  viewer.dropError.addEventListener(function (dropHandler, name, error) {
    console.log(error);
    window.alert(error);
  });

  // 隐藏底部logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 94vw;
  height: 94vh;
}

/* 隐藏底部logo */
/* .cesium-widget-credits {
  display: none !important;
} */
</style>
